import React from 'react';
import Typography from "@material-ui/core/Typography";
import CardContent from "@material-ui/core/CardContent";
import {Card} from "@material-ui/core";
import Box from "@material-ui/core/Box";
import {makeStyles} from "@material-ui/styles";

const useStyles = makeStyles(theme => ({
  image: {
    width: '70%',
    height: 'auto',
    borderRadius: '50%'
  },
  card: {
    backgroundColor: 'transparent',
    textAlign:'center',
  }
}));

const Member = (props) => {
  const classes = useStyles();

  return <>
    <Box my={2}>
      <Card elevation={0} className={classes.card}>
        <img
          className={classes.image}
          alt={props.name}
          src={process.env.PUBLIC_URL + `/images/team/${props.imageFile}`} />
        <CardContent>
          <Typography gutterBottom variant="h5">
            {props.name}
          </Typography>
          <Typography >
            {props.affiliation}
          </Typography>
        </CardContent>
      </Card>
    </Box>
  </>;
}

export default Member;
